
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Play, BookOpen, Brain, Users, Clock } from "lucide-react";

const interactiveResources = [
  {
    id: "1",
    title: "Interactive Math Visualizer",
    description: "Visual tools to understand complex mathematical concepts",
    subject: "Mathematics",
    type: "Interactive Tool",
    duration: "15-30 min",
    level: "All Levels",
    icon: Brain
  },
  {
    id: "2",
    title: "Science Experiment Simulator",
    description: "Virtual lab experiments for chemistry and physics",
    subject: "Science",
    type: "Simulation",
    duration: "20-45 min",
    level: "Intermediate",
    icon: Play
  },
  {
    id: "3",
    title: "Historical Timeline Explorer",
    description: "Interactive timelines with multimedia content",
    subject: "History",
    type: "Explorer",
    duration: "10-25 min",
    level: "Beginner",
    icon: BookOpen
  },
  {
    id: "4",
    title: "Language Learning Flashcards",
    description: "AI-powered flashcards that adapt to your progress",
    subject: "Languages",
    type: "Flashcards",
    duration: "5-15 min",
    level: "All Levels",
    icon: Brain
  },
  {
    id: "5",
    title: "Group Study Planner",
    description: "Collaborative planning tool for group projects",
    subject: "Study Skills",
    type: "Planner",
    duration: "10-20 min",
    level: "All Levels",
    icon: Users
  },
  {
    id: "6",
    title: "Quiz Generator",
    description: "Create custom quizzes from your study materials",
    subject: "General",
    type: "Generator",
    duration: "5-30 min",
    level: "All Levels",
    icon: Brain
  }
];

export function StudentInteractiveResources() {
  return (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <h3 className="text-xl font-semibold mb-2">Interactive Learning Resources</h3>
        <p className="text-gray-600">AI-curated study aids, explainers, and mini-lessons</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {interactiveResources.map((resource) => {
          const IconComponent = resource.icon;
          return (
            <Card key={resource.id} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-start justify-between mb-2">
                  <Badge variant="secondary" className="text-xs">
                    {resource.subject}
                  </Badge>
                  <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                    <IconComponent className="w-4 h-4 text-blue-600" />
                  </div>
                </div>
                <CardTitle className="text-lg">{resource.title}</CardTitle>
                <CardDescription>{resource.description}</CardDescription>
              </CardHeader>
              
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4 text-sm text-gray-600">
                  <div className="flex items-center gap-1">
                    <BookOpen className="w-4 h-4" />
                    <span>{resource.type}</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Clock className="w-4 h-4" />
                    <span>{resource.duration}</span>
                  </div>
                  <div className="col-span-2">
                    <Badge variant="outline" className="text-xs">
                      {resource.level}
                    </Badge>
                  </div>
                </div>
                
                <Button className="w-full">
                  <Play className="w-4 h-4 mr-2" />
                  Start Learning
                </Button>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
}
